<template>
    <!--工具条-->
    <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true"
                 :model="Product"
        >
            <el-form-item>
                <el-input v-model="Product.name"
                          placeholder="根据产品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="selectByName">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-input v-model="Product.id"
                          placeholder="根据商品ID"
                          ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="selectById">查询</el-button>
            </el-form-item>
            <el-button type="primary" @click="handleAdd">新增</el-button>

        </el-form>
    </el-col>
    <section>
    <!--<el-button type="primary" @click="handleAdd">新增</el-button>-->
    <!--列表-->
    <el-table :data="productList" highlight-current-row v-loading="listLoading" style="width: 100%;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="商品ID" width="100" sortable>
        </el-table-column>
        <el-table-column prop="name" label="商品名字" width="180" sortable>
        </el-table-column>
        <el-table-column prop="subtitle" label="商品副标题" width="180" sortable>
        </el-table-column>
        <el-table-column prop="mainImage" label="图片" width="180" sortable>
            <template scope="scope">
                <img :src="'http://img.cdn.imbession.top/'+scope.row.mainImage" width="100%">
            </template>
        </el-table-column>
        <el-table-column prop="categoryId" label="类别ID" width="100" sortable>
        </el-table-column>
        <el-table-column prop="status" label="商品状态" width="100" sortable>
            <template scope="scope">
				<span v-if="scope.row.status==1"
                      width="100"
                >
					<el-tag type="success">在售</el-tag>
				</span>
                <span v-else   width="100"> <el-tag type="info">下架</el-tag></span>
            </template>
        </el-table-column>

        <el-table-column prop="price" label="价格(￥)"  style="color: red" min-width="150" sortable>
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template scope="scope">
                <el-button size="small" @click="showProductDetail(scope.$index, scope.row)">查看商品详情</el-button>
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <!--<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <!--详情页面-->
    <el-dialog title="详情"
               :visible="detailFormVisible"
               :fullscreen="true"
               @close="detailFormVisible=false"
                >
        <el-button @click.native="detailFormVisible = false">关闭</el-button>
        <el-form :model="detailForm" label-width="80px"  ref="editForm">
            <el-form-item label="名称" prop="name">
                <el-input v-model="detailForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="subtitle">
                <el-input v-model="detailForm.subtitle" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="类名ID" prop="categoryId">
                <el-input v-model="detailForm.categoryId" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="主图" prop="mainImage">
                <img :src="detailForm.imageHost+detailForm.mainImage" width="100%">
            </el-form-item>
            <el-form-item label="父类ID">
                <el-input v-model="detailForm.parentCategoryId" ></el-input>
            </el-form-item>
            <el-form-item label="图片地址">
                <el-input type="textarea" v-model="detailForm.subImages"></el-input>
            </el-form-item>
            <el-form-item label="详情">
                <el-input-number v-html="detailForm.detail" ></el-input-number>
            </el-form-item>
            <el-form-item label="数量">
                <el-input-number type="textarea" v-model="detailForm.stock"></el-input-number>
            </el-form-item>
            <el-form-item label="价格">
                <el-input-number type="textarea" v-model="detailForm.price"></el-input-number>
            </el-form-item>

        </el-form>
        <div>

        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="detailFormVisible = false">关闭</el-button>
            <!--<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>-->
        </div>
    </el-dialog>
        <!--编辑界面-->
        <el-dialog title="编辑"
                   :visible="this.editFormVisible"
                   :close-on-click-modal="false"
        @close="editFormVisible=false">
            <el-form :model="editForm" label-width="80px"  ref="editForm">
                <el-form-item label="名称" prop="name">
                    <el-input  v-model="editForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="editForm.status">
                        <el-radio class="radio" :label="1">在售</el-radio>
                        <el-radio class="radio" :label="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="库存">
                    <el-input-number v-model="editForm.stock" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input-number v-model="editForm.price" :min="0" ></el-input-number>
                </el-form-item>
                <el-form-item label="是否热门">
                    <el-radio-group v-model="editForm.is_hot">
                        <el-radio class="radio" :label="1">是</el-radio>
                        <el-radio class="radio" :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否新品">
                    <el-radio-group v-model="editForm.is_new">
                        <el-radio class="radio" :label="1">是</el-radio>
                        <el-radio class="radio" :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

    <!--新增界面-->
    <el-dialog title="新增"
               :visible="addFormVisible"
               :close-on-click-modal="false"
    @close="addFormVisible=false">
        <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
            <el-form-item label="标题" prop="name">
                <el-input v-model="addForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="副标题" prop="subtitle">
                <el-input v-model="addForm.subtitle" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="详情" prop="detail">
                <el-input v-model="addForm.detail" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input-number v-model="addForm.price" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="库存">
                <el-input-number v-model="addForm.stock" :min="0"></el-input-number>
            </el-form-item>



            <el-form-item label="状态">
                <el-radio-group v-model="addForm.status ">
                    <el-radio class="radio" :label="1">在售</el-radio>
                    <el-radio class="radio" :label="2">下架</el-radio>
                    <el-radio class="radio" :label="3">删除</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否热门">
                <el-radio-group v-model="addForm.isHot ">
                    <el-radio class="radio" :label="1">热门</el-radio>
                    <el-radio class="radio" :label="0">非热门</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否新品">
                <el-radio-group v-model="addForm.isNew ">
                    <el-radio class="radio" :label="1">新品</el-radio>
                    <el-radio class="radio" :label="0">非新品</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="类别ID">
                <el-radio-group v-model="addForm.categoryId">
                    <el-radio class="radio" :label="1">手机</el-radio>
                    <el-radio class="radio" :label="2">电脑</el-radio>
                    <el-radio class="radio" :label="3">三星</el-radio>
                    <el-radio class="radio" :label="4">小米</el-radio>
                    <el-radio class="radio" :label="5">华为</el-radio>
                    <el-radio class="radio" :label="6">摩托罗拉</el-radio>
                    <el-radio class="radio" :label="7">老年机</el-radio>
                    <el-radio class="radio" :label="10">翻盖手机</el-radio>
                </el-radio-group>
            </el-form-item>
            <input type="file"
                   name="multipartFile"
                   @change="subMainImg($event)">
            <el-form-item label="主图地址">
                <el-input type="textarea" v-model="mainImage"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="addFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="addSubmit"
                       :loading="addLoading">提交</el-button>
        </div>
    </el-dialog>
    <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next"
                       @current-change="handleCurrentChange"
                       :page-size="10"
                       :total="total"
                       style="float:right;">
        </el-pagination>
    </el-col>
    </section>
    </div>
</template>

<script>
    import { getProductList, removeUser, batchRemoveUser, edProduct, addCategory }
        from '../../api/api';

    export default {
        name: "guide-page-config",
        data() {
            return {
                mainImage:"",
                Product:{
                  name:"",
                    id:""
                },
                /*imageUrl: '',
                dialogImageUrl1: '',
                dialogVisible1: false,
                GuidePageConfig1: true,
                fileList1: [
                    {name: 'xc1.jpg', url: 'http://m.age06.com/abc/guideImg/xc1.jpg'},
                ],

                dialogImageUrl: '',
                dialogVisible: false,
                GuidePageConfig: true,
                fileList2: [
                    {name: 'xc1.jpg', url: 'http://m.age06.com/abc/guideImg/xc1.jpg'},
                    {name: 'xc2.jpg', url: 'http://m.age06.com/abc/guideImg/xc2.jpg'},
                    {name: 'xc2.jpg', url: 'http://m.age06.com/abc/guideImg/xc3.jpg'}
                ]*/
                productList:[],
                pageNum:1,
                pageSize:10,
                listLoading: false,
                sels: [],//列表选中列
                total: 0,
                detailFormVisible: false,//详情页面是否显示
                editLoading: false,
             /*   editFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },*/
                detailProduct:{},
                editFormVisible:false,//编辑页面是否显示
                //详情页面数据
                detailForm: {
                    id: 0,
                    categoryId: 0,//类别ID
                    parentCategoryId: 0,//父类ID
                    name: "",
                    subtitle: '',//副标题
                    imageHost:"",//地址
                    mainImage:"",//主图
                    subImages:"",//图片地址，json格式
                    detail:"",//商品详情
                    price:"",//
                    stock:"",//库存数量商品状态，1-在售 2-下架 3-删除
                    status:"",//
                    createTime:"",
                    updateTime:""

                },
                editForm: {
                    id: 0,
                    name: "",
                    price: 0,
                    status: 1,
                    stock: 0,
                    is_new:0,
                    is_hot:0,
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ]
                },
                //新增界面数据
                addForm: {
                    categoryId: 0,
                    name: "",
                    subtitle: "",
                    detail:"",
                    price:"",
                    stock:"",
                    status:"",
                    isNew:0,
                    isHot:0,
                }

            }


        },
        methods: {
            //提交添加
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {

                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //NProgress.start();
                            var product={
                                mainImage:this.mainImage,
                                name:this.addForm.name,
                                status:this.addForm.status,
                                category_id:this.addForm.category_id,
                                subtitle:this.addForm.subtitle,
                                categoryId:this.addForm.categoryId,
                                detail:this.addForm.detail,
                                price:this.addForm.price,
                                stock:this.addForm.stock,
                                isNew:this.addForm.isNew,
                                isHot:this.addForm.isHot
                            };
                            console.log(product)
                            edProduct(product).then((res) => {
                                if(res.data.status==0){
                                    this.addLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.addFormVisible = false;
                                    this.getProductList();
                                }else {
                                    this.$message.error('失败');
                                }

                            });
                        });
                    }
                });
            },

            //提交主图地址
            subMainImg(event){
                var _vm=this;
                event.preventDefault();//取消默认行为
                this.file = event.target.files[0];
                console.log(this.file);
                let formData = new FormData();
                // 向 formData 对象中添加文件
                formData.append('multipartFile',this.file);
                this.instance.post("/manage/upload",formData).then(function (res) {
                    _vm.mainImage=res.data.data.uri
                })

            },
            //新增
            handleAdd(){
                this.addFormVisible = true;

            },
            //根据商品ID查询
            selectById(){
                this.productList=[];
                this.listLoading = true;
                // console.log(this.Product.id);
                var _vm=this;
                //调用接口去查询
                if(this.Product.id!=""){
                    this.service.post("/manage/product/search.do/",{
                        productId:_vm.Product.id,
                        pageNum: _vm.pageNum,
                        pageSize:_vm.pageSize
                    }).then(function (res) {
                        console.log(res)
                        if(res.data.status==0) {
                            _vm.total = res.data.count;
                            var productList = res.data.data.list;
                            for (var i = 0; i < productList.length; i++) {
                                _vm.productList.push(productList[i])
                            }
                            _vm.listLoading = false;
                        }else {
                            this.$message.error("没有该商品")
                        }
                    })
                }else {
                    this.getProductList();
                }

            },
            //根据名字查询
            selectByName(){
                this.productList=[];
                this.listLoading = true;
                var _vm=this;
                //调用接口去查询
                if(this.Product.name!=""){
                    this.service.post("/manage/product/search.do/",{
                        productName:_vm.Product.name,
                        pageNum: _vm.pageNum,
                        pageSize:_vm.pageSize
                    }).then(function (res) {
                        if(res.data.status==0){
                            _vm.total=res.data.count;
                            var productList=res.data.data.list;
                            for(var i=0;i<productList.length;i++){
                                _vm.productList.push(productList[i])
                            }
                        }
                        _vm.listLoading = false;

                    })
                }else {
                    this.getProductList();
                }




            },
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            var product={
                                id:this.editForm.id,
                                name :this.editForm.name,
                                price:this.editForm.price,
                                status:this.editForm.status,
                                stock:this.editForm.stock,
                                is_new:this.editForm.is_new,
                                is_hot:this.editForm.is_hot,
                            };
                            // console.log(product)
                            edProduct(product).then((res) => {
                                this.editLoading = false;
                                //NProgress.done();
                                this.$message({
                                    message: res.data.data,
                                    type: 'success'
                                });
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getProductList();
                            });
                        });
                    }
                });
            },
            handleEdit:function(index,row){

                /*this.editForm = Object.assign({}, row);
                console.log(this.editForm)*/
                var  _vm=this;
                this.service.get("/manage/product/"+row.id).then(function (res) {
                    _vm.detailProduct=res.data.data
                    _vm.editFormVisible = true;
                    _vm.editForm = Object.assign({}, _vm.detailProduct);

                });
            },
            //查看商品详情
            showProductDetail(index,row){
              var  _vm=this;
                this.service.get("/manage/product/"+row.id).then(function (res) {
                    _vm.detailProduct=res.data.data
                    _vm.detailFormVisible = true;
                    _vm.detailForm = Object.assign({}, _vm.detailProduct);

                });
                //商品ID row.id


            },
            handleCurrentChange(pageNum){
                //拿到这个页数
                //去调用接口
                if(this.Product.name==""){
                    this.pageNum=pageNum;
                    this.getProductList()
                }else {
                    this.pageNum=pageNum;
                    this.selectByName()
                }

            },
            //获取类别列表
            getProductList() {
                let para = {
                    pageNum: this.pageNum,
                    pageSize:this.pageSize
                };
                this.listLoading = true;
                //NProgress.start();
                getProductList(para).then((res) => {
                    this.total=res.data.count;
                    this.productList=res.data.data.list;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },

           /* handleRemove1(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview1(file) {
                this.dialogImageUrl1 = file.url;
                this.dialogVisible1 = true;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }*/
        },
        mounted(){
            this.getProductList()


        }
    }
</script>

<style lang="scss">
   /* .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .xline{border-bottom:solid 1px #dfe9ee; height:5px;}*/
</style>